<template>
    <div class="address">
        <!--新增修改的弹出层-->
        <van-overlay :show="show" @click="show = false" >
            <div class="wrapper">
                <van-form @submit="onSubmit">
                    <van-field
                        v-model="username"
                        name="用户名"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit">提交</van-button>
                    </div>
                </van-form>
            </div>
        </van-overlay>
        <div style="position: absolute;right: 20px;color: red;">
            <span style="margin-right: 20px;" @click="showForm(emit)"><van-icon name="edit" />编辑</span>
            <span @click="showForm(add)">+新增地址</span>
        </div>
        <van-address-list
        v-model="chosenAddressId"
        :list="list"
        :disabled-list="disabledList"
        disabled-text="以下地址超出配送范围"
        default-tag-text="默认"
        add-button-text="确定"
        @add="onSuer"
        @edit="showForm(emit)"
        />

    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { getAddress,getDefaultAddress } from '../../api/address'

export default {
    name: 'Address',
    data() {
        return {
            show: false,
            chosenAddressId: '',
            list: [],
            disabledList: [
                {
                id: '3',
                name: '王五',
                tel: '1320000000',
                address: '浙江省杭州市滨江区江南大道 15 号',
                },
            ],
        }
    },
    async created() {

        // 获取默认地址
        const {defaultAddress} = await getDefaultAddress()
        const newDefaultAddress = {
            id: defaultAddress.id,
            name: defaultAddress.name,
            tel: defaultAddress.tel,
            address: `${defaultAddress.province}${defaultAddress.city}${defaultAddress.county}`,
            isDefault: true
        }
        this.list.push(newDefaultAddress)

        // 获取地址列表
        const {addresses} = await getAddress()
        console.log(addresses);
        //将地址列表数据处理后放入 list 中
        addresses.forEach(item => {
            const newAddress = {
                id: item.id,
                name: item.name,
                tel: item.tel,
                address: `${item.province}${item.city}${item.county}`
            }
            // console.log(newAddress);
            //判断一下当前地址是否已经存在，如果没有，则添加,如果有，则不添加
            if(!this.list.some(listItem => listItem.id === newAddress.id)){
                this.list.push(newAddress)
            }
            
        })

        
        
    },
    methods: {
        ...mapMutations('address',['addAddress']),
        // 点击确定按钮
        onSuer() {
            console.log(this.chosenAddressId);
            //获取地址列表中选中的地址
            const suerList = this.list.find(item => item.id === this.chosenAddressId)
            console.log(suerList);
            // 将选中的地址保存到 store 中
            this.addAddress(suerList)
            this.$router.replace('/order')
        },
        // 点击编辑按钮
        showForm(lev){
            this.show = true
        }
    }
}
</script>

<style scoped>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
</style>
